<template>
  <div class="register-container">
    <!--登录面板内容部分-->
    <div class="register-inner">
      <!--面板头部-->
      <div class="register-header">
        <div class="register-logo">
          <img src="./images/logo-round.png" alt="" width="150">
        </div>

      </div>
      <!--面板表单部分-->
      <div class="register-content">
        <form>
          <!--手机验证码注册部分-->
          <div :class="{current: registerMode}">
            <section class="register-message">
              <input type="tel" maxlength="11" placeholder="手机号" v-model="phone_number">
              <button
                v-if="!countDown"
                class="get-verification"
                :class="{phone_right: phoneRight}"
                @click.prevent="getVerifyCode()"
              >
                获取验证码
              </button>
              <button
                v-else
                disabled="disabled"
                class="get-verification">
                已发送({{countDown}}s)
              </button>
            </section>
            <section class="register-verification">
            <input type="tel" maxlength="8" placeholder="验证码" v-model="code">
          </section>
            <section class="register-verification">
              <input type="password" maxlength="18" placeholder="新密码" v-if="pwdMode" v-model="pwd">
              <input type="text" maxlength="18" placeholder="新密码" v-else v-model="pwd">
              <div class="switch-show">
                <img @click.prevent="dealPwdMode(false)" :class="{on: pwdMode}" src="./images/hide_pwd.png" alt=""
                     width="20">
                <img @click.prevent="dealPwdMode(true)" :class="{on: !pwdMode}" src="./images/show_pwd.png" alt=""
                     width="20">
              </div>
            </section>
          </div>
          <!--账号注册部分-->

          <button class="register-submit" @click.prevent="find_pwd">找回密码</button>
        </form>
        <button class="register-back" @click="$router.back()">返回</button>


      </div>
    </div>
  </div>
</template>


<script>
  import {getPhoneCode, phonePwdLogin, pwdCodeRegister} from './../../api/index';
  import { MessageBox } from 'element-ui';
  import {mapActions} from 'vuex';
  // import { jm } from './../../static/jm'
  import jm from '../../../static/jm'
  import qs from 'qs';
  import axios from 'axios'
 const BASE_URL = 'http://127.0.0.1:8886';

  export default {

    name: "Register",
    mounted(){


    },
    data(){
      return {
        registerMode: true, // 登录方式, true 验证码登录 false 账号登录
        phone_number: '', // 手机号码
        countDown: 0, // 倒计时
        pwdMode: true, // 密码的显示方式 true 密文 false 明文
        pwd: '', // 密码
        code: '', // 验证码
        userInfo: {}, // 用户的信息
        user_name: '', // 用户名
        fff:1111,
        arr:[1,2,3]
      }
    },
    computed: {
      // 验证手机号是否合理
      phoneRight() {
        return /^[1][3,4,5,7,8][0-9]{9}$/.test(this.phone_number)
      }
    },
    methods: {

      toast(text) { //模态框
        this.$alert(text, '提示', {
          confirmButtonText: '确定',
          callback: action => {

          } });
      },
      //導入注冊jm
      methods1:function(){
        jm();
      },
      ...mapActions(['syncUserInfo']),
      // 1. 登录的模式
      dealRegisterMode(flag) {
        this.egisterMode = flag;
      },
      // 2. 获取短信验证码
      async getVerifyCode() {
        // 2.1 开启倒计时
        if (this.phoneRight) {
          this.countDown = 60;
          this.intervalId = setInterval(() => {
            this.countDown--;
            // 判断
            if (this.countDown === 0) {
              clearInterval(this.intervalId);
            }
          }, 1000);
        }

        // 2.2 获取短信验证码
        let result = await getPhoneCode(this.phone_number);
        console.log(result);

        // 2.3 获取验证码失败
        if (result.data.状态码  === 500) {
          // 提示信息
          MessageBox({
            type: 'info',
            message: result.message,
            showClose: true,
          });

        }else if(result.data.状态码 === 200){
          MessageBox({
            type: 'info',
            message: `发送成功`,
            showClose: true,
          });
        }
      },
      // 3. 密码的显示方式
      dealPwdMode(flag) {
        this.pwdMode = flag;
      },


      // 5. 注册
      find_pwd() {

        if(!this.phone_number)
        {
          this.toast('请输入手机号');
          return;
        }
        if(!this.pwd&&this.pwd.length>=9)
        {
          this.toast('请输入9位以上密码');
          return;
        }

        axios.post(BASE_URL +'/user/get_back_password',
          qs.stringify({phone_number:this.phone_number, password:jm(this.pwd),code:this.code }),
          {'headers': {'Content-Type': 'application/x-www-form-urlencoded'}})
          .then(re =>{
            console.log(re.data.备注)
            if(re.data.状态码 === 200)
            {
              this.toast('密码重置成功');
              this.phone_number='';
              this.code='';
              this.pwd='';
            }
            else
            {
              // window.localStorage.setItem('token','');
            }
          })
          .catch((error =>{
            console.log(error)
          }))
        }
      }

  }

</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "../../common/stylus/mixins.styl"
  .register-container
    width 100%
    height 100%
    background #fff
    .register-inner
      padding-top 60px
      width 25%
      margin 0 auto
      .register-header
        .register-logo
          font-size 20px
          font-weight bold
          color mediumpurple
          text-align center
        .register-header-title
          padding-top 40px
          padding-bottom 10px
          text-align center
          > a
            color #333
            font-size 14px
            padding-bottom 4px
            &:first-child
              margin-right 40px
            &.current
              color mediumpurple
              font-weight 700
              border-bottom 2px solid mediumpurple
      .register-content
        > form
          > div
            display none
            &.current
              display block
            input
              width 100%
              height 100%
              padding-left 8px
              box-sizing border-box
              border 1px solid #ddd
              border-radius 4px
              outline 0
              font 400 14px Arial
              &:focus
                border 1px solid mediumpurple
            .register-message
              position relative
              margin-top 16px
              height 48px
              font-size 14px
              background #fff
              .get-verification
                position absolute
                top 50%
                right 10px
                transform translateY(-50%)
                border 0
                color #ccc
                font-size 14px
                background transparent
                &.phone_right
                  color purple
            .register-verification
              position relative
              margin-top 16px
              height 48px
              font-size 14px
              background #fff
              .switch-show
                position absolute
                right 10px
                top 12px
                img
                  display none
                img.on
                  display block
            .register-hint
              margin-top 12px
              color #999
              font-size 12px
              line-height 20px
              > a
                color mediumpurple
          .register-submit
            display block
            width 100%
            height 42px
            margin-top 30px
            border-radius 4px
            background mediumpurple
            color #fff
            text-align center
            font-size 16px
            line-height 42px
            border 0
        .register-back
          display block
          width 100%
          height 42px
          margin-top 15px
          border-radius 4px
          background transparent
          border: 1px solid mediumpurple
          color mediumpurple
          text-align center
          font-size 16px
          line-height 42px
</style>
